<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>draggable-extend-shape</title>
  <style>
    #container {
      width: 1200px;
      height: 600px;
      background: #aaa;
    }
  </style>
</head>

<body>
  红色可以拖动，双击两次不能拖动，蓝色不能拖动，双击变可以拖动
  <div id="container">
    <!-- <canvas width="1200" height="600"></canvas> -->
  </div>

  <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>

  <!-- <script src="/js/spritejs.js"></script> -->
  <script src="/js/sprite-extend-shapes.js"></script>
  <script>
    // spritejs.use(spriteShapes.install)
    let i = 0;
    const {
      Scene,
      Rect,

    } = spritejs;

    const scene = new Scene('#container', {
      resolution: [ 1200, 600 ],
    });
    const layer = scene.layer();

    const rectRed = new Rect();
    const rectBlue = new Rect();

    rectBlue.on('dblclick', (evt) => {
      rectBlue.attr('draggable', { destroy: true });
    });
    rectRed.on('dblclick', (evt) => {
      rectRed.attr('draggable', { destroy: true });
    });

    rectBlue.on('mousedown', (evt) => {
      if (evt.target === rectBlue) {
        rectBlue.attr('zIndex', ++i);
      }

    });
    rectRed.on('mousedown', (evt) => {
      if (evt.target === rectRed) {
        rectRed.attr('zIndex', ++i);
      }

    });

    rectRed.attr({
      pos: [ 100, 100 ],
      width: 50,
      height: 50,
      fillColor: 'red',
      draggable: true,
      droppable: true
    });
    rectRed.on('dragover', (evt) => {
      console.log('red-dragover');
    });
    rectRed.on('drop', (evt) => {
      console.log('red-drop');
    });
    rectRed.on('dragleave', (evt) => {
      console.log('red-dragleave');
    });
    rectRed.on('dragenter', (evt) => {
      console.log('red-dragenter');
    });

    rectBlue.on('dragover', (evt) => {
      console.log('blue-dragover');
    });
    rectBlue.on('drop', (evt) => {
      console.log('blue-drop');
    });
    rectBlue.on('dragleave', (evt) => {
      console.log('blue-dragleave');
    });
    rectBlue.on('dragenter', (evt) => {
      console.log('blue-dragenter');
    })

    rectBlue.attr({
      pos: [ 200, 100 ],
      width: 50,
      height: 50,
      fillColor: 'blue',
      draggable: true,
      droppable: true
    });
    rectBlue.on('drag', (evt) => {
      console.log('blue-drag');
    })
    rectBlue.on('dragend', (evt) => {
      console.log('blue-end');
    })
    rectBlue.on('dragstart', (evt) => {
      console.log('blue-dragstart');
    })
    layer.append(rectRed);
    layer.append(rectBlue);
  </script>
</body>

</html>